<script lang="ts" module>
    import { getContext, setContext } from "svelte";

    export const FloatButtonGroupContextKey = Symbol("FloatButtonGroupContextKey");
    export const useFloatButtonGroupContext = () => getContext(FloatButtonGroupContextKey);
</script>

<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import type { FloatButtonGroupProps } from "./FloatButton";
    import FloatButton from "./FloatButton.svelte";
    import Icon from "../Common/Icons/Icon.svelte";

    let { visible = $bindable(false), ...props }: FloatButtonGroupProps = $props();
    const shape = props.shape ?? "circle";
    const type = props.type ?? "default";
    const classList = $derived(
        useClassList(props, "cm-float-btn-group", {
            [`cm-float-btn-group-${shape}`]: shape,
        })
    );

    setContext(FloatButtonGroupContextKey, { shape });

    const onClick = () => {
        visible = !visible;
    };

    const onHover = () => {
        visible = true;
    };
    const onLeave = () => {
        visible = false;
    };
</script>

{#snippet closeIcon()}
    <Icon icon="times" />
{/snippet}

<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class={classList} style={props.style} onmouseenter={props.trigger === "hover" ? onHover : undefined} onmouseleave={props.trigger === "hover" ? onLeave : undefined}>
    {#if (props.trigger && visible) || !props.trigger}
        {@render props.children?.()}
    {/if}
    {#if props.trigger}
        <FloatButton {type} {shape} icon={visible ? closeIcon : props.icon} onclick={props.trigger === "click" ? onClick : undefined}></FloatButton>
    {/if}
</div>
